
{extend name="layout/base"}
{block name="title"}客服职责{/block}
{block name="css"}
<link href="__admin_static__/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="__admin_static__/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<link href="__admin_static__/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">
{/block}
{block name="head_js"}{/block}
{block name="body"}
<body class="gray-bg">
<div class="row wrapper wrapper-content animated fadeInRight">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>客服职责 简介</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <p>该模块用于设定客服的职责，区别每个客服的服务范围。
                    <br>您可以通过下面栏目进行设置。</p>
            </div>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>客服职责　<a target="_self" href="{:url('KfCate/add')}" ><span class="btn btn-w-m btn-primary"><i class="glyphicon glyphicon-plus"></i> 添加职责</span></a></h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
                <div class="clearfix" style="clear: both"></div>
            </div>
            <div class="ibox-content">
                <div class="table-responsive">
                    <form method="post" action="{:url('KfCate/delAll')}" id="ListForm"  target="_self">
                        <table class="table table-striped" id="treeView">
                            <thead>
                            <tr>

                                <th></th>
                                <th>职责</th>
                                <th>描述</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <style>
                                .node-treeview4{color:#428bca;}
                                .node-treeview4:hover{
                                    cursor: pointer;
                                }
                                .node-treeview1{
                                    color: #fff;
                                }
                            </style>
                            {foreach name="cat_list" item="cat"}
                            <tr  parent-id="{$cat.parent_id}"  mid="{$cat.id}" {if condition="$cat.parent_id > 0"}style="display:none"{/if}>
                            <td>
                                <input type="checkbox" class="i-checks" value="{$cat.id}" name="id[]">
                            </td>
                            <td>
                                {$cat.level|str_repeat="　 ",###}
                                {if condition="$cat.hasChild eq 1"}
                                <span class=" glyphicon glyphicon-plus node-treeview4" onclick="javascript:treeViewState(this,'treeView');"></span>
                                {else}
                                <span class=" glyphicon glyphicon-plus node-treeview1"></span>
                                {/if}
                                <span class="glyphicon glyphicon-stop  node-treeview4"></span> {$cat.name}
                            </td>
                            <td>{$cat.description}</td>
                            <td>
                                <a href="{:url('KfCate/edit',['id'=>$cat.id])}" target="_self"><i class="glyphicon glyphicon-pencil text-navy"></i></a>　
                                <a  target="_self" onclick="javascript:Base_warning_location({title:'你确定给删除吗',text:'删除后将无法操作',confirmText:'删除',location:'{:url('KfCate/del',['id'=>$cat.id])}',});"><i class="glyphicon glyphicon-remove text-danger"></i></a>
                            </td>
                            </tr>
                            {/foreach}
                            <!--<tr>-->
                            <!--<td>-->
                            <!--<input type="checkbox" class="i-checks" name="input[]">-->
                            <!--</td>-->
                            <!--<td>商家与购物用户的交互试衣应用</td>-->
                            <!--<td><span class="pie">6,9</span>-->
                            <!--</td>-->
                            <!--<td>我知道您一定会谅解的，这样做就是为了确保向您一样对我们公司有着重要意义的忠诚顾客的权益。</td>-->
                            <!--<td><a href="table_basic.html#"><i class="fa fa-check text-navy"></i></a>-->
                            <!--</td>-->
                            <!--</tr>-->

                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="row">
                    <div class="col-sm-5 m-b-xs">
                        <div class="pagination">
                            <button type="button" class="btn btn-w-m btn-default" onclick="javascript:Base_warning_form({target:'ListForm','title':'您确定删除被选中的客服吗'})">批量删除</button>
                        </div>
                    </div>
                    <div class="col-sm-7 m-b-xs">
                        <nav aria-label="Page navigation">
                            <style>
                                .pagination > .active > span{
                                    background-color: #1c84c6 !important;
                                    color: #fff;
                                    border-color: #1c84c6;
                                }
                            </style>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
<script src="__admin_static__/js/jquery.min.js?v=2.1.4"></script>
<script src="__admin_static__/js/bootstrap.min.js?v=3.3.5"></script>
<script src="__admin_static__/js/content.min.js?v=1.0.0"></script>
<script src="__admin_static__/js/plugins/iCheck/icheck.min.js"></script>
<script src="__admin_static__/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="__admin_static__/js/base.js"></script>
<script>
    $(document).ready(function(){
        $(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
    });
    //伸缩树状图函数
    function treeViewState(target,tr)
    {
        var table = $('#'+tr);
        var target = $(target);
        var tr = target.parents('tr');
        var id = tr.attr('mid');
        var actionTd = table.find('tr[parent-id='+id+']');
        var status = 0;
        //当前是展开状态
        if(target.hasClass('glyphicon-minus'))
        {
            //隐藏他的子类
            target.removeClass('glyphicon-minus').addClass('glyphicon-plus');
            status = 0;
        }
        else
        {
            //展开他的子类
            target.removeClass('glyphicon-plus').addClass('glyphicon-minus');
            status = 1;
        }

        //递归循环设置状态
        eachTree(id);


        //递归设置状态
        function eachTree(id)
        {
            if(isNull(id)) return;
            //循环查找该子类
            table.find('tr').each(function(){
                var tr_target = $(this);
                if(tr_target.attr('parent-id') == id)
                {
                    if(status == 0)
                    {
                        tr_target.find('.node-treeview4').removeClass('glyphicon-minus').addClass('glyphicon-plus');
                        tr_target.hide();
                    }
                    else
                    {
                        tr_target.find('.node-treeview4').removeClass('glyphicon-plus').addClass('glyphicon-minus');
                        tr_target.show();
                    }
                    eachTree(tr_target.attr('mid'));
                }
            });

            function isNull(text)
            {
                return text=="" || text==null || typeof text == "undefined";
            }
        }

    }
</script>

</body>
{/block}
